import React, { useRef, useState } from "react"
import { View } from "@tarojs/components"
import Page from "@/components/page";
import account from "@/store/account";
import { observer } from "mobx-react";
import BillList from "@/components/billList"
import Calendar from "./calendar"
import MonthInfo from "./monthInfo";
import HomeHeader from "./homeHeader";
import BillInsert from "./billInsert";
import user from "@/store/user";
import { getStorageSync, setStorageSync, usePullDownRefresh } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import viewMode from "@/store/viewMode";
import { billType, dayType } from "@/types";
import { eventBus } from '@/event-bus';

import "./index.scss"

interface monthInfoType {
    total: number,
    income: number,
    expense: number,
    month?: string,
    viewHeight?: number,
    accountId?: number
}
const BookPage: React.FC = observer(() => {
    const [dayItem, setDayItem] = useState<dayType>({ id: '', data: { bills: [] } })
    const [refreshKey, setRefreshKey] = useState('')

    const onDayActive = (day: dayType) => {        
        setDayItem(day)
    }

    const refMonthInfo = useRef({
        queryTarget: (data: monthInfoType) => {
            console.log(data);
        }
    })

    const onMonthActive = (data: monthInfoType) => {
        refMonthInfo.current.queryTarget({ ...data, accountId: account.activeAccount?.id })
    }


    const refBillInsert = useRef<{
        openBillFormHand: (bill: billType) => void
    }>({
        openBillFormHand: (bill) => {
            console.log(bill);
        }
    })

    usePullDownRefresh(() => {
        viewMode.refresh()
        setTimeout(() => {
            Taro.stopPullDownRefresh();
        }, 100)
    })


    const eidtBill = (bill) => {
        refBillInsert.current.openBillFormHand(bill)
    }
    const refresh = () => {
        setRefreshKey(new Date().getTime() + '')
    }

    // 防止BillInsert组件中的录音组件被chat页面中相同组件覆盖，每次显示重新初始化
    const [showInsert, setShowInsert] = useState(false)

    Taro.useDidHide(() => {
        setShowInsert(false)
    })
    Taro.useDidShow(() => {
        const needRefresh = !!getStorageSync('home-page-refresh')        
        if (needRefresh) {
            refresh()
            setStorageSync('home-page-refresh', '')
        }
        setShowInsert(true)
    })

    Taro.useLoad(() => {
        eventBus.on('refreshBillListEvent', () => {
            setStorageSync('home-page-refresh', true)
        });
    })

    return (<Page className="home-page page-background text-main-color flex-column">
        <HomeHeader onChange={refresh}></HomeHeader>
        <View className="page-body flex1" key={user.info?.id}>
            <MonthInfo ref={refMonthInfo}></MonthInfo>
            <Calendar onDayActive={onDayActive} onMonthActive={onMonthActive} refreshKey={refreshKey}></Calendar>
            <BillList className="day-list-card"
                noDataTitle="今日没有记账"
                noDataDesc="点击下方按钮增加，长按语音记账更方便哦"
                title={dayItem.id}
                bills={dayItem.data?.bills || []}
                onFinish={refresh}
                onEdit={eidtBill}
            />
        </View>
        {
            showInsert ? <BillInsert
                date={dayItem.id || ''}
                onRefresh={refresh}
                ref={refBillInsert}
            /> : null
        }
    </Page>)
})

export default BookPage